<template>
  <div :class="[cur_state === 'real'?'three-box':'two-box','chart-box','agency_fb']">
    <p>{{title}}</p>
    <div>
      <span class="percent"
            :title="offset !== 100?formatOffset(offset):''"><span
        :class="signChange(offset)"></span>{{formatOffset(offset)}}</span>
      <span class="big-font" :title="percent!==100?formatPercent(percent)+'%':''">{{formatPercent(percent)}}
        <span class="per-tip" v-if="percent && percent!==100">%</span>
      </span>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  export default {
    name: 'ChartBox',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    props: {
      title: {
        type: String
      },
      offset: {
        type: Number,
      },
      percent: {
        type: Number,
      }
    },

    mounted(){
    },
    computed: {
      ...mapGetters(['cur_state']),
    },
    methods: {
      signTip: (data) => {
        if (data > 0 && data !== 100) {
          return '+';
        } else {
          return '';
        }
      },
      signChange(offset){
        return offset === 100? 'plat':parseFloat(offset) < 0?'down':parseFloat(offset) > 0?'up':'plat'
      },
      formatPercent(percent){
        let sign = percent > 0 ?'+': percent < 0 ? '-':'';
        return !percent || percent === 100 ? ' ' : Math.abs(percent.toFixed(3)) === 0 ? 0
          :Math.round(percent) == 0 ?sign + Math.abs(percent).toFixed(1)
          :sign + Math.round(Math.abs(percent));
      },
      formatOffset(offset){
        return !offset || offset == 100 ? ' ' : Math.abs(offset.toFixed(4)) === 0 ? 0
          :Math.abs(offset).toFixed(2) == 0.00 ? +Math.abs(offset).toFixed(3)
          :Math.abs(offset).toFixed(2);
      }
    },
    watch: {}
  }
</script>

<style scoped lang="scss">
  @import "../../../common/common.scss";

  .chart-box {
    flex-grow: 1;
    height: 50px;
    padding: 5px;
    position: relative;
    &:first-child {
      margin-right: 4px;
    }
    &:last-child {
      margin-left: 4px;
    }
    &.three-box {
      width: 127.3px;
    }
    &.two-box {
      width: 185px;
    }
    background-color: rgba(49, 49, 49, 0.51);
    @include backdropBlur;
    p {
      opacity: 0.8;
    }

    &.disabled{
      p{
        opacity: 0.4;
      }
      div{
        .percent{
          cursor: default;
          span{
            opacity: 0.5;
          }
        }
      }
    }
    div {
      span {
        /*max-width: 60px;*/
        /*overflow: hidden;*/
        white-space: nowrap;
        /*text-overflow: ellipsis;*/
      }
      .percent {
        float: left;
        font-size: 18px;
        opacity: 0.5;
        margin-top: 16px;
        span {
          display: inline-block;
          vertical-align: bottom;
          width: 18px;
          height: 22px;
          /*background-size: 18px 18px;*/
          opacity: 1;
          &.up {
            background: url("../../../../static/images/confirm/up-icon.png") no-repeat -2px;
          }
          &.down {
            background: url("../../../../static/images/confirm/down-icon.png") no-repeat -2px;
          }
          &.plat {
            background: url("../../../../static/images/confirm/plat-icon.png") no-repeat -2px;
            margin-left: 10px;
          }
        }
      }
      .big-font {
        font-size: 30px;
        /*font-size: 22px;*/
        font-weight: normal;
        float: right;
        margin-right: 6px;
        margin-top: 4px;
        position: absolute;
        right: 0;
        max-width: 66px;
        .per-tip{
          font-size: 16px;
          opacity:0.8;
        }
      }
    }
  }
</style>
